<!--学生组件-->
<template>
  <div class="student">
    <h1>学生组件</h1>
    <div>
        <input type="text" v-model="changeName">
          <input type="button" value=" 修改" @click="editStuName" />
    </div>
    <h2 class="cc">
      学生姓名：<span class="yy">{{ stuName }}</span>
      </h2>
    <h2>所属学校：{{ school }}</h2>
    <h2>
      所属年级：<span class="yy">{{ grade }}</span>
    </h2>
    <h2>所属班级：{{ cls }}</h2>
    <h2>年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //第一种方式(只接收)
  //   props: ['stuName','grade','cls'],
  //第二种方式（限制类型）
//   props: { stuName: String, grade: String, cls: String ,age : Number },
  //第三种方式（限制类型、限制必要性、指定默认值）
props: {
  stuName: {
    type: String, //类型
    required: true, //必要性
    default: "张三", //默认值   
  },
  grade: {
    type: String,
    default: "大一",
  },
  cls: {
    type: String,
    default: "1班",
  },
  age: {
   type: Number,
   default: 18 //默认值
  }
},
//方法集合
methods: {
    //修改学生姓名
    editStuName(){
        console.log("修改学生姓名===>"+this.stuName);
        
        this.$emit('updateName',this.changeName,22)
    },
},
  data() {
    //这里存放数据
    return {
      school: "盐城机电",
      changeName: ""
    };
  },
};
</script>
<style scoped lang="less">
.student {
  background-color: rgb(247, 121, 161);
  .cc{
  color: red;
  .yy{
    color: rgb(241, 76, 230);
    }
  }
  .yy{
    color: rgb(75, 229, 249);
  }
}
</style>